<template>
    <el-row>
        <el-col>
            <h3 style="text-align: center;">导航栏</h3>
            <el-menu default-active="1000" @select="selectMenu">
                <template v-for="item in menuList">
                    <!-- 根菜单 -->
                    <el-menu-item :index="item.id" v-if="item.children == null || item.children.length == 0">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span>{{item.name}}</span>
                    </el-menu-item>

                    <!-- 根目录 -->
                    <el-sub-menu :index="item.id" v-else>
                        <template #title>
                            <el-icon>
                                <component :is="item.icon" />
                            </el-icon>
                            <span>{{item.name}}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <template v-for="itemSub in item.children">
                            <el-menu-item :index="itemSub.id">
                                <el-icon>
                                    <component :is="itemSub.icon" />
                                </el-icon>
                                <span>{{itemSub.name}}</span>
                            </el-menu-item>
                        </template>
                    </el-sub-menu>

                </template>
            </el-menu>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
    import { Document, Menu as IconMenu, Location, Setting } from "@element-plus/icons-vue";
    import { ElMessage } from 'element-plus';
    import { getCurrentInstance, onMounted, onBeforeUnmount } from 'vue';
    import score_analyseVue from './content/score_analyse.vue';
    import score_manageVue from './content/score_manage.vue';
    import class_manageVue from './content/class_manage.vue';
    import exam_manageVue from './content/exam_manage.vue';

    const cxt = getCurrentInstance()
    const bus = cxt.appContext.config.globalProperties.$bus

    const menuList = [
        {
            id: 1000,
            name: '成绩分析',
            icon: 'Odometer',
            route: score_analyseVue
        },
        {
            id: 2000,
            name: '成绩管理',
            icon: 'DataAnalysis',
            route: score_manageVue
        }, {
            id: 3000,
            name: '班级管理',
            icon: 'Calendar',
            route: class_manageVue
        }, {
            id: 4000,
            name: '考试管理',
            icon: 'Files',
            route: exam_manageVue
        }];

    const emit = defineEmits(['select-menu']); // 生命要触发的事件

    const selectMenu = function (key : string, keyPath : string[]) {
        // console.log(key, keyPath);
        menuList.forEach(menu => {
            if (menu.id == Number(keyPath[0])) {
                if (keyPath.length == 2) {
                    menu.children.forEach(menu => {
                        if (menu.id == Number(keyPath[1])) {
                            bus.emit('select-menu', menu);
                        }
                    });
                } else if (keyPath.length == 1) {
                    bus.emit('select-menu', menu);
                } else {
                    ElMessage.error('菜单设置异常')
                }
            }
        });

    }
</script>